Javascript Introduction
Comments in Javascript
Javascript Variables
Difference between var, let and const in Javascript
Datatypes
Assignment Operators
Logical Operators
Comparison Operators
Actions alert, prompt & confirm

Javascript Flow Control
Conditional Statements in Javascript
Nullish coalescing operator in Javascript
Break and Continue in Javascript
Loops in javascript
for loop in Javascript
while loop

Javascript Functions
Javascript Functions
JavaScript Arrow Function

Javascript Objects
Javascript Objects

Javascript Array
Javascript Arrays

Javascript Error Handling
Error Handling in Javascript

Javascript ES6
Set
Javascript Spread Operator
Rest Parameter in Javascript

Javascript Asynchronous
Javascript Callback Function
Promises in Javascript
Promise Chaining
Async-Await in Javascript

Javascript DOM
DOM Document
DOM Elements
DOM Attributes
DOM Manipulation
DOM Node Lists
Javascript Events
DOM Traversing Elements
DOM EventListener

Javascript Class
Classes in javascript
Class Inheritance

Javascript Design Principles
SOLID - The Single responsibility principle in javascript
SOLID - Open-Closed principle in Javascript

Other Topics
Javascript Hoisting
Filter, Map and Reduce functions in Javascript
Closure in Javascript
Optional chaining operator in Javascript
Consoling in table format in javascript
Fetch API in Javascript
HTML web Storage API
Checking the online or offline status of the browser

JavaScript Arrow Function

Arrow function is an alternate to a regular function and in arror function there are no binding of this. In regular function the this keyword represents the object that called the function. The arrow function cannot be used as constructors.

The regular function looks something like below.

            greetMessage = function(name) {
	return `Welcome ${name}!`;
}

        

Modifying the above function to arrow function

            greetMessage = (name) => {
	return `Welcome ${name}!`;
}

        

The arrow function will not contain function keyword and it contains arrow representation before the block of statement.

Arrow function with single statement will look something like below.

greetMessage = (name) => `Welcome ${name}`;

Example program to know difference between regular function and arrow function.

        <html>
<body>
 <div>
  	<h1>Arrow function Demo</h1>
  	<button id="btn_arrow">Click</button>
  	<p id="p_arrow"></p>
 </div>
 <div>
  	<h1>Regular function Demo</h1>
  	<button id="btn_regular">Click</button>
 	<p id="p_regular"></p>
 </div>

<script>
let arrowDemo = () => {
  document.getElementById("p_arrow").innerHTML += this;
}
  
let regularDemo = function() {
  document.getElementById("p_regular").innerHTML += this;
}

//A button object calls the function:
document.getElementById("btn_arrow").addEventListener("click", arrowDemo);
document.getElementById("btn_regular").addEventListener("click", regularDemo);
</script>

</div>
</html>
    
    

In the above example, there are two functions one is an arrow function which is arrorDemo() and the other is regular function which is regularDemo() function. The arrowDemo function has been added as event listener to a button with btn_arrow id. Similarly, the regularDemo function has been added as event listener to a button with btn_regular id. Now when clicking the button with btn_regular as id, will return the button object and clicking on the button with btn_arrow as id, will return the window object because, this keyword of arrow function represents the object that defined the arrow function.

JavaScript Arrow Function

Categories

Most Read